<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<h:outputStylesheet name="table-style.css" />
</h:head>
<h:body>
<h1>JSF 2 dataTable exmaple</h1>
<h:form>
<h:dataTable value="#{order.orderList}" var="o" styleClass="order-table"
headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row">	
	<h:column>
	<f:facet name="header">
	<h:commandLink action="#{order.sortByOrderNo}">Order No</h:commandLink>
	</f:facet> 
	<h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />
	<h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />
	</h:column>

	<h:column><f:facet name="header">Product Name</f:facet> 
	<h:inputText value="#{o.productName}" size="10" rendered="#{o.editable}" />
	<h:outputText value="#{o.productName}" rendered="#{not o.editable}" />	
	</h:column>

	<h:column><f:facet name="header">Price</f:facet> 
	<h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />
	<h:outputText value="#{o.price}" rendered="#{not o.editable}" />		
	</h:column>

	<h:column><f:facet name="header">Quantity</f:facet> 
	<h:inputText value="#{o.qty}" size="10" rendered="#{o.editable}" />
	<h:outputText value="#{o.qty}" rendered="#{not o.editable}" />		
	</h:column>
	
	<h:column><f:facet name="header">Action</f:facet>
	<h:commandLink value="Delete" action="#{order.deleteAction(o)}" /> | 
	<h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />
	<h:commandLink value="Save" action="#{order.saveAction(o)}" rendered="#{o.editable}" />	
	</h:column>	
</h:dataTable>
<h:commandButton action="#{order.saveAllAction}" value="Save Changes" />
	<h3>New Order</h3>
	<table>
		<tr>
			<td>Order No :</td>
			<td><h:inputText value="#{order.orderNo}" size="10" /> </td>
		</tr>
		<tr>
			<td>Product Name :</td>
			<td><h:inputText value="#{order.productName}" size="20" /> </td>
		</tr>
		<tr>
			<td>Price :</td>
			<td><h:inputText value="#{order.price}" size="5" /> </td>
		</tr>
		<tr>
			<td>Quantity :</td>
			<td><h:inputText value="#{order.qty}" size="10" /> </td>
		</tr>
	</table>
	<h:commandButton value="Add New Order" action="#{order.addAction}" />
</h:form>
<h1>Data Model example</h1>
<h:dataTable value="#{order.orderDataModelList}" var="o" styleClass="order-table" 
headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row">
	<h:column><f:facet name="header">No</f:facet>
	#{order.orderDataModelList.rowIndex + 1}
	</h:column>
		
	<h:column><f:facet name="header">Order No</f:facet>	
	<h:outputText value="#{o.orderNo}" />
	</h:column>

	<h:column><f:facet name="header">Product Name</f:facet>
	
	<h:outputText value="#{o.productName}" />	
	</h:column>

	<h:column><f:facet name="header">Price</f:facet>	
	<h:outputText value="#{o.price}" />		
	</h:column>

	<h:column><f:facet name="header">Quantity</f:facet>	
	<h:outputText value="#{o.qty}"  />		
	</h:column>
	
	<!-- <h:column><f:facet name="header">Action</f:facet>
	<h:commandLink value="Delete" action="#{order.deleteAction(o)}" /> | 
	<h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />
	<h:commandLink value="Save" action="#{order.saveAction(o)}" rendered="#{o.editable}" />	
	</h:column> -->	
</h:dataTable>	

<h1>JSF 2 ui:repeat tag example</h1>
<table class="order-table">
<tr>
<th class="order-table-header">Order No</th>
<th class="order-table-header">Product Name</th>
<th class="order-table-header">Price</th>
<th class="order-table-header">Quantity</th>
</tr>
<tbody>
<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
<h:panelGroup rendered="#{status.even}">
<tr>
<td class="order-table-even-row">#{o.orderNo}</td>
<td class="order-table-even-row">#{o.productName}</td>
<td class="order-table-even-row">#{o.price}</td>
<td class="order-table-even-row">#{o.qty}</td>
</tr>
</h:panelGroup>
<h:panelGroup rendered="#{status.odd}">
<tr>
<td class="order-table-odd-row">#{o.orderNo}</td>
<td class="order-table-odd-row">#{o.productName}</td>
<td class="order-table-odd-row">#{o.price}</td>
<td class="order-table-odd-row">#{o.qty}</td>
</tr>
</h:panelGroup>
</ui:repeat>
</tbody>
</table>

<h1>Sortable Data Model example</h1>
<h:form>
<h:dataTable value="#{order.sortableDataModelOrderList}" var="o" styleClass="order-table" 
headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row">
	<h:column><f:facet name="header">No</f:facet>
	#{order.orderDataModelList.rowIndex + 1}
	</h:column>
		
	<h:column>	
	<f:facet name="header">
	<h:commandLink action="#{order.sortByOrderNo}">Order No</h:commandLink>	
	</f:facet>
	
	<h:outputText value="#{o.orderNo}" />	
	</h:column>
	
	<h:column><f:facet name="header">Product Name</f:facet>
	
	<h:outputText value="#{o.productName}" />	
	</h:column>

	<h:column><f:facet name="header">Price</f:facet>	
	<h:outputText value="#{o.price}" />		
	</h:column>

	<h:column><f:facet name="header">Quantity</f:facet>	
	<h:outputText value="#{o.qty}"  />		
	</h:column>
	
	<!-- <h:column><f:facet name="header">Action</f:facet>
	<h:commandLink value="Delete" action="#{order.deleteAction(o)}" /> | 
	<h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />
	<h:commandLink value="Save" action="#{order.saveAction(o)}" rendered="#{o.editable}" />	
	</h:column> -->	
</h:dataTable>	
</h:form>
</h:body>
</html>